<template>
  <view class="bg-[var(--page-bg-color)] min-h-[100vh] pt-60rpx pb-60rpx" :style="themeColor()">
    <view v-for="(item, index) in [memberInfo]" :key="index"
      class="sidebar-margin card-template  py-0 mb-[var(--top-m)]">
      <view>
        <view class="flex items-center">
          <view class="w-[60rpx] h-[60rpx]">
            <image v-if="item.decodeFields[1].value == 0"
              :src="'http://files.meton.vip/4e5bf58679eb9357b2fe51253bd237964fa4f851eed3ee3a80c219996a34e54a.png'"
              class="w-[60rpx] h-[60rpx]"></image>
            <image v-else
              :src="'http://files.meton.vip/636a0ab14592275f16f31842e69c58aaacd01a3b29a982e7ea1bd204ea7f34f0.png'"
              class="w-[60rpx] h-[60rpx]"></image>
          </view>
          <view class="flex-1  flex items-center ml-[20rpx]  box-border py-[30rpx] border-0">
            <view class="flex-1">
              <view class="text-[26rpx] text-[#333]">{{ item.decodeFields[0].value }}{{ item.description ? ' - '
                +
                item.description : '' }}</view>
              <view class="text-[24rpx] text-[var(--text-color-light9)] mt-[16rpx]">
                {{ item.decodeFields[1].value == 1 ? '男' : '女' }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bg-[#fff] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)]">
      <view
        class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
        <text class="text-[30rpx] font-500">
          症状记录
        </text>
      </view>
      <view class="flex  pt-[20rpx] pb-[24rpx]" @touchmove.prevent.stop>
        <text
          class="px-[14rpx] flex-shrink-0  box-border ml-[20rpx]  h-[60rpx] text-center leading-[56rpx] text-[24rpx] text-[#333] ">
          {{ zizhuzhencha.optionName }} {{ zizhuzhencha.childrenName }}</text>
      </view>
    </view>
    <view class="bg-[#fff] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)]">
      <view
        class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
        <text class="text-[30rpx] font-500">
          症状图
        </text>
      </view>
      <view class="flex  pt-[20rpx] pb-[24rpx]" @touchmove.prevent.stop>
        <image :src="zizhuzhencha.imgUrl" />
      </view>
    </view>
    <view v-for="(item, index) in tiaolidan.decodeFields" :key="index">
      <view class="bg-[#fff] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)]">
        <view
          class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
          <text class="text-[30rpx] font-500">
            {{ item.title }}
          </text>
        </view>

        <template v-if="item.props.options">
          <view class="flex flex-wrap pt-[20rpx] pb-[24rpx]" @touchmove.prevent.stop>
            <template v-if="item.title.indexOf('推荐商品') == -1">
              <text
                class="px-[14rpx] flex-shrink-0  box-border ml-[20rpx] min-w-[160rpx]  h-[60rpx] text-center leading-[56rpx] text-[24rpx] border-[2rpx] border-solid !rounded-[100rpx] text-[#333] "
                :class="{ 'bg-[var(--primary-color-light)] font-500 text-[var(--primary-color)] border-[var(--primary-color)]': state.optionName == items.label, 'border-[var(--temp-bg)]  bg-[var(--temp-bg)]': state.optionName != items.label }"
                v-for="(items, indexs) in item.props.options" :key="indexs"
                @click="childDetails(item, items, indexs)">{{
                  items.label
                }}</text>
            </template>
            <template v-else>
              <view v-for="(items, indexs) in item.props.options" :key="indexs"
                @click="childDetails(item, items, indexs)"
                class="bg-white flex px-[20rpx] rounded-[var(--rounded-small)] overflow-hidden top-mar"
                :class="{ 'mb-[20rpx]': (index + 1) == item.props.options.length }">
                <image v-if="items.imgUrl" class="w-[95rpx] h-[95rpx] rounded-[var(--rounded-mid)]"
                  :src="img(items.imgUrl)" :mode="'aspectFill'"
                  @error="items.imgUrl = 'static/resource/images/diy/shop_default.jpg'">
                </image>
                <image v-else class="w-[95rpx] h-[95rpx] rounded-[var(--rounded-mid)]"
                  :src="img('static/resource/images/diy/shop_default.jpg')" :mode="'aspectFill'"></image>
                <view class="flex-1 flex flex-col ml-[20rpx] py-[6rpx]">
                  <view class="text-[28rpx] text-[#333] leading-[40rpx] multi-hidden mb-[10rpx]">
                    {{ items.label }}
                  </view>
                </view>
              </view>

            </template>


          </view>

        </template>
        <template v-else>
          <view class="flex px-[24rpx] pt-[20rpx] pb-[24rpx] text-[24rpx] text-[#333] leading-[56rpx]"
            @touchmove.prevent.stop>
            {{ item.props.placeholder }}
          </view>
        </template>
      </view>
      <template v-if="item.props.options">

        <view class="bg-[#fff] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] "
          v-if="item.childrenList && item.childrenList.length > 0">
          <view class="flex flex-wrap pt-[20rpx] pb-[24rpx]" @touchmove.prevent.stop>
            <text
              class="px-[14rpx] flex-shrink-0  box-border ml-[20rpx] min-w-[160rpx]  h-[60rpx] text-center leading-[56rpx] text-[24rpx] border-[2rpx] border-solid !rounded-[100rpx] text-[#333] "
              :class="{ 'bg-[var(--primary-color-light)] font-500 text-[var(--primary-color)] border-[var(--primary-color)]': state.childrenName == items.label, 'border-[var(--temp-bg)]  bg-[var(--temp-bg)]': state.childrenName != items.label }"
              v-for="(items, indexs) in item.childrenList" @click="selectChildren(items, indexs)" :key="indexs">{{
                items.label
              }}</text>
          </view>
        </view>
      </template>

    </view>


  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { t } from '@/locale'
import { redirect, img } from '@/utils/common';
// import { getmemberList, } from '@/app/api/member';

import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { getBpmFormPage, getMemberBabyRecord, getMemberBaby } from '../api';
const state = reactive({
  optionIndex: undefined, //选择的分类ID
  optionName: undefined, //大分类名称
  childrenIndex: undefined, //二级分类选择的index
  childrenName: undefined, //小分类名称
  childrenList: undefined, //二级分类
  url: '', //生成的要跳转的链接
  imgUrl: '', //

});
const childDetails = (item: { childrenList: any; }, items: {
  url: any; label: undefined; children: any;
}, index: any) => {
  state.optionIndex = index;
  state.optionName = items.label; //大分类名称
  state.childrenIndex = undefined;
  item.childrenList = items.children;
  if (items.url) {
    state.url = items.url;
    toUrl();
  } else {
    state.url = '';
  }

};
const selectChildren = (item: { label: undefined; url: string; imgUrl: string; }, index: any) => {
  state.childrenIndex = index;
  state.url = item.url;
  toUrl();

};
const toUrl = () => {
  if (state.url != '') {
    redirect({
      url: state.url,
    });
  } else {
    // uni.showToast({
    // 	title:"请先生成调理单"
    // })
  }
};

const memberInfo = ref<any>({})
const tiaolidan = ref<any>({})
const zizhuzhencha = ref<any>({})

const decodeFields = (fields: any[]) => {
  const rule: any[] = [];
  fields.forEach((item: string) => {
    rule.push(JSON.parse(item));
  });
  return rule;
};



const getConfig = async (id: any) => {
  // 自主诊查详情
  const { data: detail } = await getMemberBabyRecord({ id: id }) as any
  zizhuzhencha.value = detail
  // 宝宝信息
  const { data: baby } = await getMemberBaby({ id: detail.babyId }) as any
  memberInfo.value = baby
  memberInfo.value.decodeFields = decodeFields(memberInfo.value.fields)
  // 调理单详情
  const res = await getBpmFormPage({ type: 2, id: detail.bpmId }) as any

  if (res.code == 0) {
    const tiaolidanConfig = res.data.list[0]
    tiaolidan.value = tiaolidanConfig
    tiaolidan.value.decodeFields = decodeFields(tiaolidan.value.fields)
  }

};

onLoad(async (options: any) => {
  let id = options.id
  await getConfig(id);
});
</script>

<style lang="scss" scoped>
:deep(.type-class .u-popup .u-transition) {
  top: 86rpx !important;
}
</style>
